<!DOCTYPE html>
<html>

<head>
<title>Cindy JS Example</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csdraw" type="text/x-cindyscript">
y = 8;
forall([A, C0, Tr0, C1, a, b, c, C, D, E, F, C2, C3, C4, G, H, K, e, C5, L, f],
 drawtext((0, y), #.name+": "+algorithm(#));
 y = y-0.75);
err(A.xy);
err(B.xy);
</script>
<script type="text/javascript">

CindyJS({
  scripts: "cs*",
  defaultAppearance: {
    dimDependent: 0.7,
    fontFamily: "sans-serif",
    lineSize: 1,
    pointSize: 5.0,
    textsize: 12.0
  },
  angleUnit: "°",
  geometry: [
    {name: "A", type: "Free", pos: [4.0, -0.8, -0.4], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "B", type: "Free", pos: [4.0, -2.0, -0.5], color: [1.0, 0.0, 0.0], labeled: true},
    {name: "C0", type: "CircleMP", color: [0.0, 0.0, 1.0], args: ["A", "B"], printname: "$C_{0}$"},
    {name: "Tr0", type: "TrTranslation", color: [0.0, 0.0, 1.0], args: ["A", "B"], dock: {offset: [0.0, -0.0]}},
    {name: "C1", type: "TransformConic", color: [0.0, 0.0, 1.0], args: ["Tr0", "C0"], printname: "$C_{1}$"},
    {name: "a", type: "Join", color: [0.0, 0.0, 1.0], args: ["A", "B"], labeled: true},
    {name: "Collection__1", type: "IntersectionCircleCircle", args: ["C0", "C1"]},
    {name: "D", type: "SelectP", pos: [4.0, {r: -0.697830520748037, i: 2.2070588312056207E-15}, {r: -0.5503615798753269, i: 7.773440174097654E-17}], color: [1.0, 0.0, 0.0], args: ["Collection__1"], labeled: true},
    {name: "C", type: "SelectP", pos: [4.0, {r: -1.763707940790424, i: 4.712720986149987E-16}, {r: -0.37271534320159616, i: 6.194676430099382E-17}], color: [1.0, 0.0, 0.0], args: ["Collection__1"], labeled: true},
    {name: "b", type: "Orthogonal", color: [0.0, 0.0, 1.0], args: ["a", "C"], labeled: true},
    {name: "c", type: "Parallel", color: [0.0, 0.0, 1.0], args: ["a", "C"], labeled: true},
    {name: "E", type: "PointOnCircle", pos: [4.0, {r: 0.3313708498984757, i: 2.859510109139477E-18}, {r: -0.3999999999999999, i: -3.45173404361373E-18}], color: [1.0, 0.0, 0.0], args: ["C0"], labeled: true},
    {name: "F", type: "OtherPointOnCircle", pos: [4.0, {r: -1.9313708498984756, i: -2.687555184762981E-17}, {r: -0.3999999999999999, i: -5.566109035774775E-18}], color: [1.0, 0.0, 0.0], args: ["E"], pinned: true, labeled: true},
    {name: "d", type: "Join", color: [0.0, 0.0, 1.0], args: ["E", "A"], labeled: true},
    {name: "C2", type: "CircleByRadius", pos: {xx: {r: 0.010009171467685202, i: 1.7507477744037585E-19}, yy: {r: 0.010009171467685202, i: 1.7507477744037585E-19}, zz: 1.0, xy: 0.0, xz: {r: 0.20018342935370412, i: 1.7740456536387068E-18}, yz: {r: -0.0165837382801321, i: -2.9007338898102005E-19}}, color: [0.0, 0.0, 1.0], radius: 0.8819989450808214, args: ["E"], printname: "$C_{2}$"},
    {name: "C3", type: "CircleByFixedRadius", color: [0.0, 0.0, 1.0], args: ["E"], printname: "$C_{3}$"},
    {name: "Collection__2", type: "ConicBy2Foci1P", args: ["A", "B", "C"]},
    {name: "C4", type: "SelectConic", pos: {xx: {r: 0.0110062893081761, i: 1.5042710099323975E-19}, yy: {r: 0.011006289308176093, i: 1.0444210746176384E-17}, zz: 1.0, xy: {r: 0.0031446540880503146, i: -1.6870684997469983E-18}, xz: {r: 0.20754716981132076, i: -2.757195471369838E-18}, yz: {r: 0.0943396226415094, i: 4.465590344928506E-17}}, color: [0.0, 0.0, 1.0], args: ["Collection__2"], printname: "$C_{4}$"},
    {name: "Collection__3", type: "IntersectionConicLine", args: ["C4", "d"]},
    {name: "G", type: "SelectP", pos: [4.0, {r: -0.1731107000870203, i: -1.3032476807755926E-16}, {r: -0.3999999999999999, i: -1.9125958020581486E-18}], color: [1.0, 0.0, 0.0], args: ["Collection__3"], labeled: true},
    {name: "H", type: "SelectP", pos: [4.0, {r: -2.1126035856272667, i: 1.1047916970303941E-16}, {r: -0.4, i: 4.004662558422439E-18}], color: [1.0, 0.0, 0.0], args: ["Collection__3"], labeled: true},
    {name: "K", type: "PolarOfLine", color: [1.0, 0.0, 0.0], args: ["d", "C4"], labeled: true},
    {name: "e", type: "PolarOfPoint", color: [0.0, 0.0, 1.0], args: ["A", "C4"], labeled: true},
    {name: "C5", type: "ArcBy3", color: [0.0, 0.0, 1.0], args: ["E", "G", "D"], printname: "$C_{5}$"},
    {name: "L", type: "Meet", color: [1.0, 1.0, 1.0], args: ["a", "b"], size: 0.0},
    {name: "Collection__4", type: "AngularBisector", args: ["a", "b", "L"]},
    {name: "f", type: "SelectL", pos: [{r: 0.44444444444444453, i: -4.918226997824353E-17}, {r: 3.088189045145525E-17, i: -4.1175853935273646E-17}, 4.0], color: [0.0, 0.0, 1.0], args: ["Collection__4"], labeled: true}
  ],
  ports: [{
    id: "CSCanvas",
    width: 666,
    height: 500,
    transform: [{visibleRect: [-18.98, 9.5, 7.66, -10.5]}],
    grid: 1.0,
    snap: true,
    background: "rgb(168,176,192)"
  }],
  cinderella: {build: 1865, version: [2, 9, 1865]}
});

</script>
</head>

<body style="font-family:Arial;">
  <div id="CSCanvas" style="border:2px solid black"></div>
  <p>The <code>algorithm</code> function is used to obtain the name of the
    geometric operation for a given element, in a way that is compatible with
    Cinderella. So the point <code>A</code> should be described above as
    <code>FreePoint</code> 
</body>

</html>
